<template>
  <div>
    <!-- 查看凭证弹窗 -->
    <el-dialog :visible="visible" title="查看凭证" class="dialog" width="60%" @close="closeDialog">
      <div>
        <el-carousel
          :ref="'carousel'"
          :height="imgHeight"
          :autoplay="false"
          class="el-carousel"
          arrow="always"
          indicator-position="outside"
          @change="cangeCarouse">
          <el-carousel-item v-for="(item, index) in picList" :key="index">
            <div class="carouselPicBox">
              <!-- <h3>{{ item }}</h3> -->
              <img :src="item" :ref="'img'+index" class="carouselPic" alt="" @load="loadImage(index)">
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="bottomButton" style="height:60px">
          <!-- <el-button type="primary" @click="addFormFn('specificationForm')">确定</el-button> -->
          <el-button v-preventReClick type="info" @click="closeDialog()">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { Message } from 'element-ui'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    checkData: {
      type: String,
      required: true
    },
    checkIndex: {
      type: Number,
      required: true
    }

  },
  data() {
    return {
      picList: [],
      imgHeight: '430px',
      carouselWidth: ''
    }
  },
  watch: {
    checkIndex(val) {
      if (val === 0) {
        console.log('checkData::', this.checkData)
        const checkArr = this.checkData.split(',')
        console.log(checkArr)
        for (let i = 0; i < checkArr.length; i++) {
          this.picList.push(checkArr[i])
        }
        // console.log(this.picList)
      }
    }
  },
  mounted() {
    this.carouselWidth = parseInt(window.document.body.clientWidth * 0.562)
    console.log('clientWidth:', this.carouselWidth)

    // console.log('获取图片高度：', this.$refs['img0'].clientHeight)
    // this.checkList = this.expressData
  },
  methods: {
    loadImage(index) {
      if (index === 0) {
        console.log(this.$refs['carousel'])
        const w = this.$refs['img0'][0].width
        const h = this.$refs['img0'][0].height
        // console.log(this.picList[key1])
        //   // if ()
        // this.imgHeight = h + 'px'
        // this.$refs[img][0].clientHeight = 900

        // 高度为480

        if (w > h) { // 横画
          // this.$refs['img0'][0].height = parseInt(h / 480) + 'px'
          const bili = parseFloat(h / w)
          console.log('比例：', bili)

          const curW = this.carouselWidth
          const curH = 480

          this.$refs['img0'][0].width = curW
          this.$refs['img0'][0].height = curH

          // console.log('宽：', curW, '高', curH)

          // console.log(parseInt(h / 480))
        }

        if (w < h) { // 竖画
          const bili = parseFloat(w / h)
          console.log('比例：', bili)
          const curW = 480 * bili
          const curH = 480

          this.$refs['img0'][0].width = curW
          this.$refs['img0'][0].height = curH

          // console.log('宽：', curW, '高', curH)
        }
      }
    },
    cangeCarouse(key1, key2) {
      console.log(key1, key2)
      const w = this.$refs['img' + key1][0].width
      const h = this.$refs['img' + key1][0].height
      console.log(this.picList[key1])
      //   // if ()
      // this.imgHeight = h + 'px'
      // this.$refs[img][0].clientHeight = 900

      // 高度为480

      if (w > h) { // 横画
        // this.$refs['img' + key1][0].height = parseInt(h / 480) + 'px'
        const bili = parseFloat(h / w)
        //  console.log('比例：', bili)

        const curW = this.carouselWidth
        const curH = 480

        this.$refs['img' + key1][0].width = curW
        this.$refs['img' + key1][0].height = curH

        console.log('宽：', curW, '高', curH)

        // console.log(parseInt(h / 480))
      }

      if (w < h) { // 竖画
        const bili = parseFloat(w / h)
        // console.log('比例：', bili)
        const curW = 480 * bili
        const curH = 480

        this.$refs['img' + key1][0].width = curW
        this.$refs['img' + key1][0].height = curH

        console.log('宽：', curW, '高', curH)
      }

      // console.log(w, ',', h)
    },
    closeDialog() {
      this.$emit('update:visible', false)
      this.$emit('update:checkIndex', -1)
    }
  }
}
</script>>
<style lang="scss" scoped>
    .fl{
        float: left;
    }
    .fr {
        float: right
    }
    .ml10{
        margin-left: 10px;
    }
    .dialog{
        padding:10px;
    }
    .expressTable{
        margin-left: 20px;
        td {
            line-height: 50px;
        }
    }
    .bottomButton{
        height: 70px;
        padding-top: 10px;
        border-top: 1px solid #DDD;
        width: 100%;
        height: 40px;
        text-align: center;
    }

    .input{
        margin-left: 20px;
    }
    .bottomDiv{
        padding:0 0 20px 11%;
    }
    .carouselPicBox{
        width:100%;
        height: 100%;
        text-align: center;
    }
    .carouselPic{

    }
    .el-carousel {
       //  width: 730px;
    //   /deep/ .el-carousel__item--card {
    //     height: auto !important;
    //   }
    //   /deep/ .el-carousel__item {
    //     height: auto !important;
    //   }
    //   /deep/ .el-carousel__item--card.is-active {
    //     z-index: 2;
    //     position: absolute;
    //     left: 50%;
    //     transform: translate(-50%, 0px) !important;
    //   }
    }
</style>
